<template>
<div id="login" >
    <form @submit.prevent="loginTest" id="login-form">
        <md-card >
            <md-card-header>
                <div class="md-title">LOGIN</div>
            </md-card-header>

            <md-card-content>

                <b-form-group id="input-group-1" label="Email address:" label-for="input-1" description="We'll never share your email with anyone else.">
                    <b-form-input id="input-1" v-model.trim="user.email" type="email" required placeholder="Enter email" :state="emailCorrect" @blur="checkEmail()"></b-form-input>
                </b-form-group>

                <b-form-group id="input-group-2" label="Password:" label-for="input-2" description="密码只能为数字字母下划线且不少于6位">
                    <b-form-input id="input-2" v-model.trim="user.password" type="password" minlength=6 required placeholder="Enter Password" :state="passwordCorrect" @blur="checkPassword()"></b-form-input>
                </b-form-group>

                <b-alert :show="showAlert" variant="danger">{{loginAlert}}</b-alert>

                <md-button type="submit" class="md-raised md-primary">登录</md-button>
                
                <md-button class="md-raised md-primary" @click="$router.push('/register')">没有账号？</md-button>

            </md-card-content>
        </md-card>
    </form>
</div>
</template>

<script>
import user from '@/api/user'

export default {
    name: 'login',

    data: () => ({
        showAlert: false,
        loginAlert: null,
        passwordCorrect: null,
        emailCorrect: null,
        backgroundImg: require('../assets/background.jpg'),
        user: {
            email: null,
            password: null,
        },

    }),
    computed: {

    },
    mounted() {
        document.title = "LOGIN";
        document.body.style.backgroundImage = `url(${this.backgroundImg})`;
    },
    methods: {
        loginTest() {
            this.$store.dispatch('login', this.user).then(() => {
                this.$router.push('/');
            }).catch(err=>{
                this.showAlert = true;
                this.loginAlert = err.response.data.msg;
                window.console.log(err.response);
            })
        },
        async test() {
            try {
                const res = await user.addFakeUser();
                window.console.log(res);
            } catch (err) {
                window.console.error(err)
            }
        },
        checkPassword() {
            this.passwordCorrect = this.user.password.length >= 6 ? true : false;
        },
        checkEmail() {
            this.emailCorrect = this.tools.checkEmail(this.user.email);
        },
        login() {
            this.showAlert = false;
            if (!this.emailCorrect || !this.passwordCorrect) {
                return;
            }
            const url = `${this.config.SERVER}/user/login`;

            this.axios.post(url, this.user).then(res => {
                this.$store.commit('setToken', res.data.token);
                this.showAlert = true;
                this.loginAlert = res.data.msg;

            }).catch(err => {
                this.showAlert = true;
                this.loginAlert = err.response.data.msg;

            })
        }
    }

}
</script>

<style lang="scss" scoped>
$mobile-width: 600px;

#login {
    background: white;
    position: absolute;
    width: 100vw;

    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@media (min-width: $mobile-width) {

    #login {
        width: 480px;

    }
}
</style>
